<template>
    <div>
        <div class="header">
            <div class="header-left no-select" @click="$router.push('/menu')">
                <img class="header-left-logo" :src="logo">
                {{title}} Portal
            </div>
            <div class="header-right no-select flex-row">
                <el-dropdown>
                    <div class="user_style">
                        <!-- <img class="top-bar__img"
                            :src="userInfo.avatar"> -->
                        <img class="top-bar__img"
                            :src="require('@/assets/images/photo.png')">
                        {{userInfo.Name}}
                    </div>
                    <el-dropdown-menu slot="dropdown">
                        <el-dropdown-item
                                @click.native="$router.push('/account')"
                        >
                            个人账户
                        </el-dropdown-item>
                        <el-dropdown-item
                                v-if="userAuthority.MANAGE_BACKEND"
                                @click.native="$router.push('/tenant')"
                        >
                            组织管理
                        </el-dropdown-item>
                        <el-dropdown-item
                                @click.native="handleLogout"
                        >
                            安全退出
                        </el-dropdown-item>
                    </el-dropdown-menu>
                </el-dropdown>
            </div>
        </div>
        <div class="container flex-row">
            <div :style="flexMenuStyle" class="container-menu">
                <router-link class="container-menu-item flex-row"
                             active-class="menu-active"
                             :key="list.id"
                             v-for="list in menuList"
                             :to="`/account/${list.path}`">
                    <div class="container-menu-hidden"/>
                    <span class="menu-icon iconfont" :class="list.icon" />
                    <div class="menu-title">{{list.title}}</div>
                </router-link>
            </div>
            <div class="container-flex-bt no-select" :style="flexBtStyle" @click="flexMenu">
                <span class="iconfont" :class="flexBt" />
            </div>
            <div :style="flexBtStyle" class="container-content account">
                <router-view></router-view>
            </div>
        </div>
    </div>
</template>
<script>
    import {logout} from "@/api/user";
    import {
        removeToken,
        getTenantInfo,
        getUserInfo,
        setUserInfo,
        getUserAuthority,
        removeUserAuthority,
        removeTenantInfo,
        removeConfig,
    } from "@/util/auth";
    export default {
        name: "account",
        components:{

        },
        data () {
            return {
                userInfo: {},
                tenantInfo: {},
                userRole: "",
                userAuthority: {},
                tenantId: '',
                flexBt: 'cgsIcon-left',
                flexMenuStyle: null,
                flexBtStyle: null,
                menuActive: 'App',
                menuList: [
                    {
                        id: 'safe',
                        path: 'safe',
                        icon: 'cgsIcon-safety-certificate',
                        title: '安全设置',
                    }
                ]
            }
        },
        created () {
            let _this = this;
          this.$ws.on('current_license', (data) => {
            if (data.Timeout){
              _this.$message.warning("License已过期，请重新申请！")
            }
          })
            this.getUserInfo();
        },
        computed: {
            title() {
                return this.$store.state.sysInfo.name
            },
            logo() {
                return this.$store.state.sysInfo.logo
            }
        },
        methods: {
            flexMenu() {
                if (this.flexBt === 'cgsIcon-left') {
                    this.flexBt = 'cgsIcon-right'
                    this.flexMenuStyle = {width: '60px'}
                    this.flexBtStyle = {left: '60px'}
                } else {
                    this.flexBt = 'cgsIcon-left'
                    this.flexMenuStyle = {width: '240px'}
                    this.flexBtStyle = {left: '240px'}
                }
            },
            getUserInfo () {
                let userInfo = getUserInfo();
                this.userInfo = JSON.parse(userInfo);
                let userAuth = getUserAuthority()
                if (!userAuth) {
                    this.handleLogout()
                    return
                }
                let authorities = userAuth["operatingAuthorities"];
                this.userRole = userAuth["roleName"];
                if(!authorities){
                    authorities = [];
                }
                this.userAuthority = {};
                this.tenantInfo = getTenantInfo();
                for (let i = 0; i < authorities.length; i++) {
                    if(authorities[i] === 'MANAGE_BACKEND'){
                        this.userAuthority[authorities[i]] = true;
                        continue;
                    }
                    this.userAuthority[authorities[i]] = !this.tenantInfo.account.timeout;
                }
                this.tenantId = userAuth["tenantId"];
                if(this.tenantInfo.account.timeout){
                    this.$message.warning("账户已过期！")
                }
            },
            handleLogout(){
                removeToken();
                removeUserAuthority();
                removeTenantInfo();
                removeConfig();
                setUserInfo(null);
                logout().then(()=>{
                    this.$router.push({path: "/login"});
                });
            },
        }
    }
</script>
